<template>
  <div class="section-wrap safeDetails">
    <!-- 头部 -->
    <div class="headerBox">
      <div class="header">
        <x-icon type="ios-arrow-left" size="" class="icon-white" @click="goBack"></x-icon>
        安全检查详情
      </div>
    </div>
    <div class="form-section" style="margin-top: 40px;">
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>检查编号</label>
        </div>
        <div class="input_div">
          <p>{{info.checkNo}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>被检查单位</label>
        </div>
        <div class="input_div">
          <p>{{info.projectName}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>检查类型</label>
        </div>
        <div class="input_div">
          <!-- <p>{{info.checkType}}</p> -->
          <input type="text" v-model="info.checkType"
                 disabled>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>检查时间</label>
        </div>
        <div class="input_div">
          <p>{{info.checkDate}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>整改责任人</label>
        </div>
        <div class="input_div">
          <p>{{hideninfo.zgZrrName}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>参与检查人</label>
        </div>
        <div class="input_div">
          <p>{{hideninfo.partakeCheckPerson}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>被检查地点</label>
        </div>
        <div class="input_div">
          <p>{{hideninfo.checkedPlaces}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>检查范围和内容</label>
        </div>
        <div class="input_div">
          <p>{{hideninfo.checkedRangeAndContent}}</p>
        </div>
      </div>
      <div  class="form-item form-item-style1">
        <div class="label-title">
          <label>更多</label>
          <!-- <i class="iconfont icon-required"></i> -->
        </div>
        <div class="input_div" @click="addGoComm">
          <input type="text"
                disabled
                 v-model="zginfos"
          >
          <x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon>
        </div>
      </div>
      <div class="info_div3" v-if="this.info.isPlan==1">
        <p>检查组成员及分工<span>（{{checkDivisionList.length}}条）</span></p>
        <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
      </div>
      <div class="member_div" v-if="this.info.isPlan==1">
        <ul class="member_list">
          <li v-for="item in checkDivisionList" :key="item.id" class="lc">
            <div class="form-item form-item-style1">
              <div class="label-title">
                <label>成员：</label>
              </div>
              <div class="input_div">
                <input type="text" class="member1"
                       v-model="item.divisionProsonName"
                       disabled>
              </div>
            </div>
            <div class="form-item form-item-style1 form-item-lc" style="border-bottom: none;">
              <div class="label-title">
                <label>分工：</label>
              </div>
              <div class="input_div">
                <!-- <input type="text" v-model="item.standardNameList"
                       placeholder="请选择"
                       :disabled="isDisabled"> -->
                <div style="line-height: inherit;text-align: right;" class="content">{{item.standardNameList}}</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="notice_div" style="display:;">
        <div class="notice_top">
          <p>检查记录<span></span></p>
          <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
        </div>
        <ul class="notice_list">
          <li v-for="(name,index) in info.divisionList" :key="index">
            <div class="down_div" @click="toggle(index)">
              <label>{{name.standardNameList}}</label>
              <div class="notice_item">
                <span class="notice_number">{{name.contentList.length}}</span>
                <x-icon type="ios-arrow-right" size="22" v-if="opensId.indexOf(index)==-1" ></x-icon>
                <x-icon type="ios-arrow-down" size="22" v-if="opensId.indexOf(index)>-1"></x-icon>
              </div>
            </div>
            <ul class="cList" :class="[opensId.indexOf(index)?'active':'']">
              <li v-for="(val,i) in name.contentList" :key="i" @click="selectDivision(val.checkResult)"
                  class="clearfix">
                <p>{{val.checkContent}}</p>
                <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- 问题记录 -->
      <div class="notice_div" style="display:">
        <div class="notice_top" @click="showContent002 = !showContent002">
          <p>发现问题<span>（{{questioncount}}条）</span></p>
          <!-- <x-icon type="ios-plus-outline" size="22" class="icon-down" @click="addGo"></x-icon> -->
        </div>
        <Slide @hiddenfun="hiddenfun" :isdelete="false" v-if="showContent002" :listArr="list"></Slide>
      </div>
      <div class="info_div3">
        <p>通知单记录<span></span></p>
        <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
      </div>
      <div class="member_div">
        <ul class="member_list" id="safeDet">
          <li @click="notice(1)">
            <div class="form-item form-item-style1" style="border-bottom: none;">
              <div class="label-title">
                <label style="display: block;width: 190px;">安全稽查整改通知单</label>
              </div>
              <div class="input_div">
                <input type="text"
                       readonly>
                <x-icon style="margin-top:-16px;margin-right:20px;" type="ios-arrow-right" size="22" class="icon-right"></x-icon>
              </div>
            </div>
          </li>
          <li @click="notice(2)">
            <div class="form-item form-item-style1" style="border-bottom: none;">
              <div class="label-title">
                <label style="display: block;width: 190px;">生成安全检查违章记分通知书</label>
              </div>
              <div class="input_div">
                <input type="text"
                       readonly>
                <x-icon style="margin-top:-16px;margin-right:20px;" type="ios-arrow-right" size="22" class="icon-right"></x-icon>
              </div>
            </div>
          </li>
          <!-- <li @click="notice(2)">
            <div class="form-item form-item-style1" style="border-bottom: none;">
              <div class="label-title">
                <label style="display: block;width: 190px;">生成设备停用通知单</label>
              </div>
              <div class="input_div">
                <input type="text"
                       readonly>
                <x-icon style="margin-top:-16px;margin-right:20px;" type="ios-arrow-right" size="22" class="icon-right"></x-icon>
              </div>
            </div>
          </li>
          <li @click="notice(3)">
            <div class="form-item form-item-style1" style="border-bottom: none;">
              <div class="label-title">
                <label style="display: block;width: 190px;">生成停工通知单</label>
              </div>
              <div class="input_div">
                <input type="text"
                       readonly>
                <x-icon style="margin-top:-16px;margin-right:20px;" type="ios-arrow-right" size="22" class="icon-right"></x-icon>
              </div>
            </div>
          </li> -->
        </ul>
      </div>
      <!-- <div class="info_div4" @click="$router.push('./quanHidden?checkid='+info.id)">
        <p>问题记录</p>
        <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
      </div> -->
    </div>
    <div v-transfer-dom>
      <popup v-model="classValue4" width="100%" height="300px">
        <group>
          <x-textarea :max="200" name="description" placeholder="请输入内容" v-model="checkResult" id="tt"></x-textarea>
        </group>
        <p class="transfer_p"><span @click="classValue4=false">确定</span></p>
      </popup>
      <popup v-model="classValue" width="100%" height="100%" style="background: #fff">
        <div class="headerBox">
          <div class="header">
            <x-icon type="ios-arrow-left" size="" class="icon-white" @click="classValue=false"></x-icon>
            通知单
          </div>
        </div>
        <div style="background: white;margin-top: 50px">
          <el-tree
            v-if="classValue && type=='1'"
            :data="noticesIds"
            node-key="id"
            :default-checked-keys='ids'
            ref="tree"
            :props="def"
          ></el-tree>
          <el-tree
            v-else-if="classValue && type=='2'"
            :data="noticesIds2"
            node-key="id"
            :default-checked-keys='ids'
            ref="tree"
            :props="def"
          ></el-tree>
          <el-tree
            v-else
            :data="noticesIds3"
            node-key="id"
            :default-checked-keys='ids'
            ref="tree"
            :props="def"
          ></el-tree>
        <div class="form-section"  >
        <div class="form-item form-item-style1" v-show="type=='2'">
            <div class="label-title">
                <label>违章标准</label>
            </div>
            <div class="input_div" >
                {{IllegalSandardName}}
            </div>
        </div>

        <div class="form-item form-item-style1" v-show="type=='2'">
            <div class="label-title">
                <label>抄送单位</label>
            </div>
            <div class="input_div" >
                {{PushDeptName}}
            </div>
        </div>
        </div>
          <div style="text-align:  center;margin-top: 10px;padding-bottom: 5px">
            <el-button size="mini" @click="classValue=false">取消</el-button>
           <!-- <el-button size="mini" @click="clickClose">确认</el-button>-->
          </div>
        </div>
      </popup>
    </div>
    <el-dialog :visible.sync="flag" fullscreen center>
      <img :src="selectImg" alt="" width="100%">
    </el-dialog>
    <el-dialog   :visible.sync="isshow"   width="90%" center>
      <div  class="form-item form-item-style1">
          <div class="label-title">
              <label>问题类别</label>
          </div>
          <div class="input_div" >
               <p>{{datainfo.hiddenDangerType}}</p>
          </div>
      </div>
      <div  class="form-item form-item-style2">
          <div class="label-title">
              <label>问题描述</label>
          </div>
          <div class="input_div">
              <p>{{datainfo.hiddenDangeDescription}}</p>
          </div>
      </div>
      <div  class="form-item form-item-style2">
        <div class="label-title space-between">
          <div class="space-between">
            <label>整改前图片</label>
          </div>
          <span>当前共{{datainfo.projectImgList != null ? datainfo.projectImgList.length: 0}}张照片</span>
        </div>
        <div>
          <div class="upload-wrap"
          >
            <div class="upload-item"
                 v-for="(item,index) in datainfo.projectImgList"
                 :key="index">
              <img :src="item.url"
                   @click="previewImg(item.url)"
                   alt="">
            </div>
          </div>
        </div>
      </div>
      <div  class="form-item form-item-style2">
          <div class="label-title">
              <label>整改要求</label>
          </div>
          <div class="input_div">
              <p>{{datainfo.measure}}</p>
          </div>
      </div>
      <div class="form-item form-item-style1">
          <div class="label-title">
              <label>整改期限</label>
          </div>
          <div class="input_div">
             <p>{{datainfo.zgEndTime}}</p>
          </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import Slide from './slide';
  import ztree from "@commonComponents/tree"
  import selectDepart from "@commonComponents/selectUser/selectUser";
  import {Popup, TransferDom} from 'vux';

  export default {
    data() {
      return {
        zginfos:'安全稽查整改基本信息',
        isshow:false,
        showContent002: false,
        IllegalSandardName:"",
        PushDeptName:"",
        type: "",
        opensId: [],
        noticesIds: [],
        noticesIds2: [],
        noticesIds3: [],
        checkDivisionList: [],
        def:{
          children:'data',
          label:"hiddenDangeDescription",
        },
        ids: [],
        noticeList: [],
        classValue: false,
        checkResult: '',
        classValue4: false,
        isDisabled: true, // 是否禁止输入
        flag: false, 
        info: [],
        hideninfo:[],
        list:[],
        questioncount:'',
        datainfo:{},
        flag: false,
        selectImg: '',
      }
    },
    components: {
      ztree, Popup,Slide, selectDepart
    },
    directives: {
      TransferDom
    },
    created() {
      this.getInfo()
      this.gethiddenNoticeList()
      this.getPlanList()
    },
    methods: {
      addGoComm(){
        this.$router.push({path:'./registerDangerNew',query:{id:this.$route.query.planId}})
      },
      previewImg(url){//图片预览
        this.selectImg=url
        this.flag=true
      },
      hiddenfun (data) {
        this.isshow = true
        this.datainfo = data
        //更新公共部分数据
        this.hideninfo = data
        this.datainfo.zgEndTime = this.datainfo.zgEndTime.substring(0,10)
        // this.showContent002 = !this.showContent002
      },
      // 问题记录
      getPlanList() {
        var p={
            skipCount:0,
            maxResultCount:10000,
            checkworkId:this.$route.query.planId
        }
        this.$axiosAjax.getHiddenPageList(p).then((res) => {
          if (res.data.success == true) {
            var list =res.data.result.items
            for (var k of list){
              if (k.projectImgList.length>0){
                k.imgUrl=k.projectImgList[0].url
              }  else {
                k.imgUrl=''
              }
            }
           
            this.questioncount=list.length
            this.list=list
          }
        }).catch((err) => {
          console.log(err)
          }
        )
      },
      goBack() {
        this.$router.go(-1)
      },
      toggle(val) {
        if(this.opensId.indexOf(val) > -1){
          this.opensId=[]
        }else{
          this.opensId=[]
          this.opensId.push(val)
        }
       /* if (this.opensId.indexOf(val) > -1) {
          var index = this.opensId.findIndex(item => {
            if (item = val) {
              return true
            }
          })
          this.opensId.splice(index, 1)
        } else {
          this.opensId.push(val)

        }*/
      },
      selectDivision(val) {
        this.classValue4 = true;
        this.checkResult = val;
      },
      gethiddenNoticeList() {
        this.$axiosAjax.gethiddenNoticeList({planId: this.$route.query.planId}).then(res => {
          if (res.data.success == true) {
            if(arr.data.result.length>0) {
            var arr = res.data.result
            this.hideninfo = res.data.result[0]
            var a1=[]
            var a2=[]
            var a3=[]
            for (var i = 0; i < arr.length; i++) {
              if (arr[i].isZgNotice == 1) {
                a1.push(arr[i])
              }
              if (arr[i].isTyNotice == 1) {
                a2.push(arr[i])
              }
              if (arr[i].isTgNotice == 1) {
                a3.push(arr[i])
              }
            }

         if(a1){
           var dest=[]
           var map={}
           for(var i = 0; i < a1.length; i++){
             var ai = a1[i];
             if(!map[ai.hiddenDangerType]){
               dest.push({
                 id: ai.id,
                 hiddenDangeDescription: ai.hiddenDangerType,
                 data: [ai]
               });
               map[ai.hiddenDangerType] = ai;
             }else{
               for(var j = 0; j < dest.length; j++){
                 var dj = dest[j];
                 if(dj.hiddenDangeDescription == ai.hiddenDangerType){
                   dj.data.push(ai);
                   break;
                 }
               }
             }
           }
           this.noticesIds=dest
         }
            if(a2){
              var dest=[]
              var map={}
              for(var i = 0; i < a2.length; i++){
                var ai = a2[i];
                if(!map[ai.hiddenDangerType]){
                  dest.push({
                    id: ai.id,
                    hiddenDangeDescription: ai.hiddenDangerType,
                    data: [ai]
                  });
                  map[ai.hiddenDangerType] = ai;
                }else{
                  for(var j = 0; j < dest.length; j++){
                    var dj = dest[j];
                    if(dj.hiddenDangeDescription == ai.hiddenDangerType){
                      dj.data.push(ai);
                      break;
                    }
                  }
                }
              }
              this.noticesIds2=dest
            }
            if(a3){
              var dest=[]
              var map={}
              for(var i = 0; i < a3.length; i++){
                var ai = a3[i];
                if(!map[ai.hiddenDangerType]){
                  dest.push({
                    id: ai.id,
                    hiddenDangeDescription: ai.hiddenDangerType,
                    data: [ai]
                  });
                  map[ai.hiddenDangerType] = ai;
                }else{
                  for(var j = 0; j < dest.length; j++){
                    var dj = dest[j];
                    if(dj.hiddenDangeDescription == ai.hiddenDangerType){
                      dj.data.push(ai);
                      break;
                    }
                  }
                }
              }
              this.noticesIds3=dest
            }

          }
            }
        });
      },
      notice(num) {
        this.ids = []
        if (num == 1) {
          this.ids = this.noticesIds
        } else if (num == 2) {
          this.ids = this.noticesIds2
        } else {
          this.ids = this.noticesIds3
        }
        this.classValue = true
        this.type = num
      },
      getInfo() {
        this.$axiosAjax.getSafeDetails({planId: this.$route.query.planId}).then(res => {
          if (res.data.success == true) {
            console.log(res.data.result,112)
            this.info = res.data.result
            if(this.info!=null) {
              if(this.info.illegalSandardId!=null) {
                this.IllegalSandardName = '记分标准第'+this.info.illegalSandardId+'条,扣'+ this.info.illegalSandardName + '分'
                this.PushDeptName = this.info.pushDeptName
              } else {
                this.IllegalSandardName = ''
                this.PushDeptName = ''
              }
            }
            this.info.checkDate = this.info.checkDate.substring(0,10)
            // 处理检查组成员和分工
            let divisionList = []
            if (this.info.divisionList && this.info.divisionList.length != 0) {
              this.info.divisionList.forEach(item => {
                if (divisionList.length == 0) {
                  divisionList.push(item)
                } else {
                  let hasId = false
                  // 检查当前数组中是否有成员出现
                  hasId = divisionList.some(sItem => {
                    return sItem.divisionProsonId == item.divisionProsonId
                  })
                  if (hasId) {
                    divisionList.forEach(dtem => {
                      if (dtem.divisionProsonId == item.divisionProsonId) {
                        dtem.standardNameList += ';' + item.standardNameList
                      }
                    })
                  } else {
                    divisionList.push(item)
                  }
                }
              })
            }
            this.checkDivisionList = divisionList
          }
        });
      },
    },
  }
</script>
<style lang="less" scoped>
input:disabled, input[disabled]{ color:#000000;-webkit-text-fill-color:#000000;}
  .active {
    display: none;
  }

  #aaa {
    background-color: #f4f4f4;
    ul {
      margin-top: -10px;
    }
    li {
      padding: 20px 10px;
      margin-bottom: 10px;
      line-height: 20px;
      background-color: #fff;
      overflow: hidden;
    }
    input {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .el-checkbox {
      display: block;
      padding-top: 10px;
      margin-left: 20px;
      margin-bottom: 20px;
    }
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    .box {
      width: 100%;
      height: 100%;
      position: relative;
      .btns_div {
        justify-content: space-around;
        display: flex;
        margin-top: 20px;
        a {
          height: 20px;
          border-radius: 20px;
          display: inline-block;
          width: 70px;
          text-align: center;
          line-height: 20px;
          color: #fff;
        }
        .submitBtn {
          background: #469b7a;
        }
        .cancelBtn {
          background: #ffb400;
        }

      }
    }

  }

  .transfer_p {
    padding: 10px 20px;
    height: 30px;
    span, em {
      width: 60px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      font-size: 16px;
      border-radius: 5px;
      color: #fff;
    }
    span {
      float: left;
      background-color: #2abf72;
    }
    em {
      float: right;
      background-color: #ceaa6c;
    }
  }

  .member_div {
    .member_list {
      li {
        border-top: 5px solid #ebeef2;
      }

      .member1 {
        color: #ff0000;
      }

      .member2 {
        color: #15bd84;
      }
    }
  }

  .section-wrap {
    height: 100%;
  }

  .form-item {
    .input_div {
      .vux-x-icon {
        fill: #999;
        float: right;
        margin-top: 17px;
      }
    }
  }

  .info_div3 {
    height: 55px;
    line-height: 45px;
    padding: 0 20px;
    border-top: 10px solid #ebeef2;
    p {
      float: left;
      color: #469b7a;
      font-size: 16px;
      font-weight: bold;
      span {
        color: #999;
        font-weight: bold;
      }
    }
    .vux-x-icon {
      fill: #999;
      float: right;
      margin-top: 12px;
    }
  }

  .info_div4 {
    height: 60px;
    line-height: 50px;
    padding: 0 20px;
    border-top: 10px solid #ebeef2;
    p {
      float: left;
      color: #333;
      font-size: 16px;
      font-weight: bold;
    }
    .vux-x-icon {
      fill: #999;
      float: right;
      margin-top: 14px;
    }
  }

  #tt {
    background-color: #eee;
    .weui-cell__bd .weui-textarea {
      height: 180px !important;
      background-color: #fff;
    }
    textarea {
      height: 180px;
    }

  }

  .notice_div {
    border-top: 10px solid #ebeef2;
    padding-left: 20px;
    .notice_top {
      border-bottom: 1px solid #ebeef2;
      height: 45px;
      line-height: 44px;
      padding-right: 20px;
      p {
        float: left;
        color: #469b7a;
        font-size: 16px;
        font-weight: bold;
        span {
          color: #999;
          font-weight: bold;
        }
      }

      .vux-x-icon {
        fill: #999;
        float: right;
        margin-top: 12px;
      }
    }

    .notice_list {
      > li {
        .down_div {
          justify-content: space-between;
          border-bottom: 1px solid #ebeef2;
          height: 55px;
          padding-right: 20px;
          label {
            display: block;
            float: left;
            height: 54px;
            line-height: 54px;
            font-weight: bold;
            width: 80%;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }

          .notice_item {
            float: right;
            .notice_number {
              background: #469b7a;
              color: #fff;
              height: 16px;
              width: 16px;
              border-radius: 50%;
              display: inline-block;
              text-align: center;
              line-height: 16px;
              font-size: 12px;
              margin-top: 19px;
            }

            .vux-x-icon {
              fill: #999;
              float: right;
              margin-top: 16px;
            }
          }
        }
        .cList {
          li {
            justify-content: space-between;
            border-bottom: 1px solid #ebeef2;
            align-items: center;
            display: flex;
            padding: 20px 13px 20px 0;
            font-size: 14px;
            p {
              float: left;
              width: calc(100% - 40px);
              line-height: 26px;
            }
            .vux-x-icon {
              fill: #999;
              float: right;
            }
          }
        }
      }

      li:last-child {
        border-bottom: none;
      }
    }
  }
  #safeDet .form-item-style1{
    line-height: normal;
  }
</style>
<style lang="less">
  .safeDetails .weui-textarea {
    height: 180px !important;
  }
  .lc {
    .form-item-lc {
      height: auto;
      .input_div {
        height: 75px;
        padding: 10px 0;
        div.content {
          height: 100%;
          width: 150px;
          font-size: 14px;
          color: #333;
          line-height: 20px;
          white-space: normal;
          margin-right: -4px;
          overflow-y: scroll; 
        }
      }
    }
  }
</style>
